<template>
  <div class="thumb-swiper-wrapper">
    <!-- swiper1 -->
    <swiper ref="swiperTop" class="swiper gallery-top" :options="swiperOptionTop">
      <swiper-slide v-for="item in imgList" :key="item.url" class="top-slide-item">
        <el-image :src="item.url" fit="cover" />
      </swiper-slide>
      <div slot="button-next" class="swiper-button-next swiper-button-white"></div>
      <div slot="button-prev" class="swiper-button-prev swiper-button-white"></div>
    </swiper>
    <!-- swiper2 Thumbs -->
    <swiper ref="swiperThumbs" class="swiper gallery-thumbs" :options="swiperOptionThumbs">
      <swiper-slide v-for="item in imgList" :key="item.url" class="thumb-slide-item">
        <el-image :src="item.url" fit="cover" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
// import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
export default Vue.extend({
  // components: { Swiper, SwiperSlide },
  props: {
    imgList: {
      type: Array,
      default: () => [
        {
          url: 'https://iph.href.lu/570x342',
        },
      ],
    },
  },
  data() {
    return {
      swiperOptionTop: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      swiperOptionThumbs: {
        // loop: true,
        // loopedSlides: 5, // looped slides should be the same
        // spaceBetween: 10,
        // centeredSlides: true,
        // slidesPerView: 4,
        // touchRatio: 0.2,
        // slideToClickedSlide: true,
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.swiperOptionTop = {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      }

      this.swiperOptionThumbs = {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 4,
        touchRatio: 0.2,
        slideToClickedSlide: true,
      }

      const swiperTop = this.$refs.swiperTop.$swiper
      const swiperThumbs = this.$refs.swiperThumbs.$swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop

      // this.swiperOptionTop.loopedSlides = this.imgList.length
      // this.swiperOptionThumbs.loopedSlides = this.imgList.length
      // this.swiperOptionThumbs.slidesPerView = this.imgList.length > 5 ? 5 : this.imgList.length
    })
  },
})
</script>
<style lang="scss" scoped>
.thumb-swiper-wrapper {
  width: 572px;

  .el-image {
    width: 100%;
    height: 100%;
  }

  .gallery-top {
    @apply border-gray-200 border-[1px] rounded-md mb-4;

    .top-slide-item {
      @apply w-[527px] h-[342px];
    }
  }

  .gallery-thumbs {
    .thumb-slide-item {
      @apply border-gray-200 border-[1px] rounded-md
       h-[80px];
    }
  }
}
</style>
